<template>
  <div class="container">
    <div class="title">食用农产品样品种类分析</div>
    <div class="body">
      <div
        class="chart"
        ref="barInfoRef"
        @mouseenter="handleHover(true)"
        @mouseleave="handleHover(false)"
      ></div>
      <div class="chart" ref="pieInfoRef"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { getHsJcsjfxByHsAJZ, getHsJclbzbByHsAJZ } from "@/api";
import * as echarts from "echarts";
const color = [
  "#F7CD60",
  "#57D18A",
  "#6BDDEA",
  "#AC60F7",
  "#E96D81",
  "#2F6BF5",
  "#AC60F7",
];
const img =
  "";

const barInfoRef = ref<HTMLElement>();
const pieInfoRef = ref<HTMLElement>();
const animation = ref(true);
const handleHover = (enter: boolean) => {
  animation.value = !enter;
};
const initData = async () => {
  const { data: data1 } = await getHsJcsjfxByHsAJZ();
  const { data: data2 } = await getHsJclbzbByHsAJZ();
  return { data1, data2 };
};
const createBarOption = (data: any) => {
  let option = {
    title: {
      text: "各街镇检测量(批次)",
      top: 10,
      x: 10,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      x: 70,
      y: 40,
      x2: 5,
      y2: 38,
    },
    xAxis: [
      {
        type: "value",
        // name: "单位：人",
        nameTextStyle: {
          color: "#fff",
          fontSize: 16,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#fff",
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: [2, 2],

            dashOffset: 1,
            width: 1,
            color: "#3C8DBF",
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3C8DBF",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        data: data.map((e: any) => e.marketnm),
        axisLine: {
          lineStyle: {
            color: "#3C8DBF",
          },
        },
        axisLabel: {
          show: true,
          color: "#fff",
          interval: 0,
          fontSize: 12,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: "bar",
        name: "各街镇检测量(批次)",
        data: data.map((e: any) => e.jcpici),
        barWidth: "10px",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              1,
              0,
              [
                {
                  offset: 0,
                  color: "rgba(42, 171, 252, 0.30)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0, 246, 230, 1)", // 100% 处的颜色
                },
              ],
              false
            ),
            // shadowColor:  "rgba(0,160,221,1)",
            // shadowBlur: 4
          },
        },
        label: {
          normal: {
            color: "#fff",
            show: false,
            formatter: "{c}",
            position: "top",
          },
        },
      },
    ],
    dataZoom: [
      //滑动条
      {
        yAxisIndex: 0, //这里是从y轴的0刻度开始
        show: false, //是否显示滑动条，不影响使用
        type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
        startValue: 0, // 从头开始。
        endValue: 5, // 一次性展示6个。
      },
    ],
  };
  return option;
};

const createPieOption = (datas: any) => {
  let option = {
    title: {
      text: "检测样品种类占比",
      top: 10,
      x: 10,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: function (params: any) {
        // 提示框浮层内容格式器
        return params.value + "%" + "<br/>" + params.name;
      },
      position: ["45%", "30%"],
      // position:'right',
      backgroundColor: "transparent",
      borderColor: "transparent",
      boxShadow: "none",
      textStyle: {
        color: "#fff", // 提示框文本颜色
        fontSize: 16, // 提示框文本字体大小
      },
      borderWidth: 0,
      padding: 0,
      textAlign: "center",
      textVerticalAlign: "middle",
    },
    legend: {
      bottom: "0%",
      itemHeight: 8,
      itemWidth: 8,
      x: "right",
      itemGap: 3,
      icon: "rect",
      textStyle: {
        color: "#fff",
      },
      data: datas,
      formatter: (name: any) => {
        if (datas.length) {
          const item = datas.filter((item: any) => item.name === name)[0];
          return item.name + "  " + item.value + "%   ";
        }
      },
    },
    series: [
      {
        name: "交易商品类别",
        type: "pie",
        radius: [60, 70],
        center: ["50%", "40%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
          fontSize: 14, // 标签字体大小
          color: "#fff",
          // formatter: function (params) {
          //   return params.name + params.value + "%";
          // }, // 标签格式化
        },
        labelLine: {
          show: true,
        },
        data: datas,
      },
      {
        //最外部细虚线
        type: "gauge",
        startAngle: 270,
        endAngle: -89.9999,
        radius: "70%",
        center: ["50%", "40%"],
        axisTick: {
          show: true,
          lineStyle: {
            color: "#4F84C9",
          },
        },
        axisLabel: {
          show: false,
        },
        splitNumber: 20,
        axisLine: {
          show: false,
          lineStyle: {
            color: [[1, "#4F84C9"]],
            width: 20,
          },
        },
        splitLine: {
          show: false,
          length: 3,
          lineStyle: {
            width: 12,
            color: "#4F84C9",
            distance: 10,
          }, //刻度节点线
        },
        detail: {
          show: false,
        },
      },
    ],
  };
  return option;
};
const timer = ref();
onMounted(async () => {
  const bar1 = echarts.init(barInfoRef.value!);
  const pie1 = echarts.init(pieInfoRef.value!);
  const { data1, data2 } = await initData();
  const barOption = createBarOption(data1);
  bar1.setOption(barOption);
  const datas: Array<any> = [];
  data2.forEach((item: any, index: number) => {
    datas.push({
      name: item.marketnm,
      value: item.hglv?.replace("%", "") || "0",
      itemStyle: {
        normal: {
          borderWidth: 15,
          color: color[index % color.length],
          // shadowColor: color[index % color.length],
        },
      },
    });
    datas.push({
      value: 1,
      name: "",
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          color: "rgba(0, 0, 0, 0)",
          borderColor: "rgba(0, 0, 0, 0)",
          borderWidth: 0,
        },
      },
    });
  });
  const pieOption = createPieOption(datas);
  pie1.setOption(pieOption);
  let currentIndex = -1;
  timer.value = setInterval(() => {
    if (animation.value === true) {
      // 每次向后滚动一个，最后一个从头开始。
      if (barOption.dataZoom[0].endValue == data1.length) {
        barOption.dataZoom[0].endValue = 5;
        barOption.dataZoom[0].startValue = 0;
      } else {
        barOption.dataZoom[0].endValue = barOption.dataZoom[0].endValue + 1;
        barOption.dataZoom[0].startValue = barOption.dataZoom[0].startValue + 1;
      }
      bar1.setOption(barOption);
    }

    //饼图
    let dataLen = datas.length;
    // 取消高亮显示
    pie1.dispatchAction({
      type: "unselect",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
    if (currentIndex == -1) {
      currentIndex = 0;
    } else {
      currentIndex += 2;
    }
    if (currentIndex == dataLen) {
      currentIndex = -1;
    }
    // 高亮显示当前项
    pie1.dispatchAction({
      type: "select",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
    pie1.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: currentIndex,
    });
  }, 2000);
});
onUnmounted(() => {
  timer.value && clearInterval(timer.value);
});
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  min-height: 0px;
  background-image: url("../../assets/组 7704.png");
  background-size: cover;
  border: 1px solid #172f7e;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 31px;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-top: 3px;
    flex: 0 0 auto;
  }
  .body {
    flex-grow: 1;
    display: flex;
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
